<template>
	<view class="back-img">
		<top-heigth></top-heigth>
		<view class="home-index">
			<view class="addr-msg" v-if="isShowMsg">
				<view class="addr-msg-title">权限使用说明</view>
				<view>应用需要获取您的位置权限，我们将获取您的准确位置信息向您推荐离您最近的技师和周边信息</view>
				<view class="addr-msg-btn" @click="msgClick">我知道了</view>
			</view>
			<uv-navbar bgColor="none" leftText="北京" :fixed="false" title="同城赴约" :safeAreaInsetTop="false">
				<template v-slot:left>
					<view class="uv-nav-slot">
						<image src="/static/image/top-address.png" style="width: 40rpx; height: 40rpx;" mode=""></image>
						<view @click="toCityPage(true)" class="top-font">{{location && location.province ? location.province : '定位未开启'}}</view>
					</view>
				</template>
				<template v-slot:right>
					<!-- <view class="uv-nav-slot">
						<image @click="saomaqujishi" src="/static/image/sao.png" style="width: 40rpx; height: 40rpx;" mode=""></image>
					</view> -->
					<view class="uv-nav-slot">
						
						<image @click="toMessage" src="/static/image/top-message.png" style="width: 40rpx; height: 40rpx; position: relative;" mode="">
							<u-badge v-if="isshowDot" :isDot="true" type="success" :offset="[10, 18]" bgColor="red" :absolute="true"></u-badge>
						</image>
					</view>
				</template>
			</uv-navbar>
		</view>
		<view class="content-box">
			<uv-swiper :list="listBanner" indicator indicatorMode="line" @click="bannerClick" key-name="bannerImage" circular></uv-swiper>
			<view class="little-nav-box">
				<view>
					<view class="little-nav">
						<image src="/static/image/little-icon1.png" style="width: 24rpx; height: 24rpx;" mode=""></image>
						<span>超时秒退</span>
					</view>
				</view>
				<view>
					<view class="little-nav">
						<image src="/static/image/little-icon2.png" style="width: 24rpx; height: 24rpx;" mode=""></image>
						<span>持证上岗</span>
					</view>
				</view>
				<view>
					<view class="little-nav">
						<image src="/static/image/little-icon3.png" style="width: 24rpx; height: 24rpx;" mode=""></image>
						<span>标准定价 全场保障</span>
					</view>
				</view>
				<view>
					<view class="little-nav">
						<image src="/static/image/little-icon4.png" style="width: 24rpx; height: 24rpx;" mode=""></image>
						<span>7*24小时服务</span>
					</view>
				</view>
			</view>
			
			<uv-row justify="space-between" gutter="10" style="margin-top: 24rpx; margin-bottom: 30rpx;" v-if="isShenhe">
				<uv-col span="12" class="index-nav-box">
					<view class="box" @click="goCoupon()">
							<image src="/static/image/icon1.png" mode=""></image>
							<view class="font">优惠专区</view>
					</view>
				</uv-col>
			</uv-row>
			<uv-row justify="space-between" gutter="10" style="margin-top: 24rpx; margin-bottom: 30rpx;" v-else>
				<uv-col span="3" class="index-nav-box">
					<view class="box" @click="goCoupon()">
							<image src="/static/image/icon1.png" mode=""></image>
							<view class="font">优惠专区</view>
					</view>
				</uv-col>
				<uv-col span="3" class="index-nav-box">
					<view class="box" @click="openChat">
							<image src="/static/image/icon2.png" mode=""></image>
							<view class="font">平台客服</view>
					</view>
				</uv-col>
				<uv-col span="3" class="index-nav-box">
					<view class="box" @click="goInJs()">
							<image src="/static/image/icon3.png" mode=""></image>
							<view class="font">合作/技师</view>
					</view>
				</uv-col>
				<uv-col span="3" class="index-nav-box">
					<view class="box"@click="goInBuss()">
							<image src="/static/image/icon4.png" mode=""></image>
							<view class="font">合作/商家</view>
					</view>
				</uv-col>
			</uv-row>
			</view>
			<uv-gap height="24rpx" bgColor="#F8F8F8"></uv-gap>
			<view class="content-box" v-if="!isShenhe">
			
			<uv-row justify="space-between" class="tab">
				<uv-col span="5">
					<view class="tab-title">
						<image class="img" src="/static/image/tab1.png" mode=""></image>
						<view class="font">
							推荐人员
						</view>
					</view>
				</uv-col>
				<uv-col span="5">
					<view class="tab-more" @click="gojsList()">
						<view class="font">
							查看更多 
						</view>
						<image class="img" src="/static/image/more.png" mode=""></image>
					</view>
				</uv-col>
			</uv-row>
			
			<uv-scroll-list :indicator="false">
				<view v-for="item in list" class="people-box">
					<view class="img-box" @click="goStaffDetail(item.id)">
						<view class="img">
							<image :src="item.staffCover" mode="widthFix" style="width: 100rpx;height: 100rpx;"></image>
						</view>
					</view>
					
					<view class="name">{{item.staffName}}</view>
					<view class="num">总接单{{item.orderCount}}</view>
				</view>
			</uv-scroll-list>
			</view>
			<uv-gap height="24rpx" bgColor="#F8F8F8"></uv-gap>
			<view class="content-box red-back">
			<uv-row justify="space-between" class="tab">
				<uv-col span="5">
					<view class="tab-title">
						<image class="img" src="/static/image/tab1.png" mode=""></image>
						<view class="font">
							热门服务 
						</view>
					</view>
				</uv-col>
			</uv-row>
			
			<view class="goods-box">
				<template v-for="item in hotLists">
					<view class="goods" @click="toServiceDetail(item.id)">
						<view class="img-box">
							<image class="img" :src="item.serviceImage" mode="widthFix"></image>
						</view>
						<view class="goods-font">
							<h1 class="goods-h1">{{item.serviceName}}</h1>
							<view class="sale">销量{{item.serviceBaseTime}}</view>
							<view class="font-bottom">
								<view class="font-bottom-l">
									<view class="red">
										<span class="goods-span-red">¥</span>{{item.serviceAmount}}
									</view>
									<view class="grey"></view>
								</view>
								<!-- <view class="but-blue t-but">立即预约</view> -->
							</view>
						</view>
					</view>
				</template>
				
			</view>
		</view>
		<view style="height: 30rpx;"></view>
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	import { TUIConversationService } from "@tencentcloud/chat-uikit-engine"
	import { checkLogin } from "@/util/checkLogin.js"
	
	export default {
		data() {
			return {
				title: 'Hello',
				list:[],
				listBanner: [],
				location: null,
				hotLists : [],
				isshowDot: false,
				isDw:"0",
				isShowMsg: false,
				isShenhe: 1
			}
		},
		components: { TopHeigth },
		onLoad() {
			uni.$on('selectCityData', (res) => {
				this.location = uni.getStorageSync('location');
			});
			// this.getLocation(false)
		},
		mounted() {
			var timer = setInterval(() => {
				if(this.listBanner.length > 0){
					clearInterval(timer)
					return false;
				}
				this.getBanner();
				this.hotList()
			}, 3000)
			
			uni.$u.http.post('/api/shop/v1_0/linyue/version',{}).then((res) => {
				this.isShenhe = !res.data
			})
			
		},
		onShow(){
			this.getBanner();
			this.hotList()
			if(this.isDw=="0"){
				// this.getLocation(false)
			}
			var location = uni.getStorageSync('location');
			
			if(location){
				this.listTui(location.cityId.substring(0, 4) + "00")
			}
			
			
			// 判断小红点
			var ismessagetime = uni.getStorageSync('ismessagetime');
			if(ismessagetime){
				// 查询最新消息
				uni.$u.http.post('/api/shop/v1_0/tAppMessageSendRCA/queryTAppMessageSend',{
					sendTypes:[0,2],
					newDate: ismessagetime
				}).then((res) => {
					if(res.aaData.length > 0){
						this.isshowDot = true
					}else{
						this.isshowDot = false
					}
				})
			}else{
				this.isshowDot = true
			}
		},
		methods: {
			saomaqujishi(){
				uni.scanCode({
					success: (res) => {
						const staffIds = res.result.match(/\d+/g);
						if(staffIds.length == 0){
							plus.nativeUI.alert("未识别员工ID");
						}else if(staffIds.length > 0){
							// 获取员工信息
							uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/turnTAppStaffInfo',{
								id: staffIds[0]
							}).then((res) => {
								if(res.code != 200){
									return plus.nativeUI.alert("二维码错误");
								}
								this.goStaffDetailSign(staffIds[0])								
							})
						}
					}
				});
			},
			getLocation(sign){
				var _this = this
				uni.getLocation({
					type: 'gcj02',
					success: lres => {					
						uni.request({
							url:"https://restapi.amap.com/v3/geocode/regeo?key=8bb5265417fbf03e07a85e276baa162d&location="+lres.longitude+","+lres.latitude+"&poitype=&radius=1000&extensions=base&roadlevel=0",
							success:(res) => {
								if(res.statusCode == 200){
									var locationInfo = {
										country: res.data.regeocode.addressComponent.country,
										    province : res.data.regeocode.addressComponent.city.length==0?res.data.regeocode.addressComponent.province:res.data.regeocode.addressComponent.city,	
										district: res.data.regeocode.addressComponent.district,
										township: res.data.regeocode.addressComponent.township,
										formattedAddress: res.data.regeocode.formatted_address,
										longitude: lres.longitude,
										latitude: lres.latitude,
										cityId: res.data.regeocode.addressComponent.adcode,
									}
									uni.setStorageSync('location', locationInfo);
									uni.setStorageSync('curMapLocaL', locationInfo);
									this.location = locationInfo;
									this.isDw ="1";
									this.listTui(locationInfo.cityId.substring(0, 4) + "00")
								}
							}
						})
					},
					fail(e){
						uni.setStorageSync('location', null);
						// plus.nativeUI.alert("定位未授权");
						if(sign){
							_this.openGps()
						}
					}
				})
			},
			openGps() {
				let system = uni.getSystemInfoSync(); // 获取系统信息
				if (system.platform === 'android') { // 判断平台
					var context = plus.android.importClass("android.content.Context");
					var locationManager = plus.android.importClass("android.location.LocationManager");
					var main = plus.android.runtimeMainActivity();
					var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
					// if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
					if (true) {
						uni.showModal({
							title: '提示',
							showCancel: true,
							content: '请打开定位服务功能',
							success(res) {
								if (res.confirm) {
									var Intent = plus.android.importClass('android.content.Intent');
									var Settings = plus.android.importClass('android.provider.Settings');
									var intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);
									main.startActivity(intent); // 打开系统设置GPS服务页面
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				} else if (system.platform === 'ios') {
					var cllocationManger = plus.ios.import("CLLocationManager");
					var enable = cllocationManger.locationServicesEnabled();
					var status = cllocationManger.authorizationStatus();
					plus.ios.deleteObject(cllocationManger);
					uni.showModal({
						title: '提示',
						content: '请打开定位服务功能',
						success(res) {
							if (res.confirm) {
								var UIApplication = plus.ios.import("UIApplication");
								var application2 = UIApplication.sharedApplication();
								var NSURL2 = plus.ios.import("NSURL");
								var setting2 = NSURL2.URLWithString("App-Prefs:root=Privacy&path=LOCATION");
								application2.openURL(setting2);
								plus.ios.deleteObject(setting2);
								plus.ios.deleteObject(NSURL2);
								plus.ios.deleteObject(application2);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
							
						}
					});
				}
			},
			// 打开 1v1 聊天
			openChat() {
				checkLogin(() => {
					// 切换会话进入聊天
					const conversationID = `C2CLinYue`;
					// #ifdef APP-PLUS || H5
					TUIConversationService.switchConversation(conversationID);
					// #endif
					uni.navigateTo({
					  url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}`,
					});
				})
				
			},
			goInJs(){
				uni.navigateTo({
					url: "/pages/applyFor/downP"
				})
			},
			goInBuss(){
				uni.navigateTo({
					url: "/pages/applyFor/businessP"
				})
			},
			gojsList(){
				uni.navigateTo({
					url: "/pages/technician/list"
				})
			},
			goCoupon(){ // 优惠专区 -- 领卷专区
				uni.navigateTo({
					url: "/pages/order/coupon"
				})
			},
			goStaffDetail(id){
				uni.navigateTo({
					url: "/pages/technician/detail?id="+id
				})
			},
			goStaffDetailSign(id){
				uni.navigateTo({
					url: "/pages/technician/detail?isparent=1&id="+id
				})
			},
			toServiceDetail(id){
				uni.navigateTo({
					url: "/pages/order/goodsDetail?id=" + id
				})
			},
			getBanner(){
				uni.$u.http.post('/api/shop/v1_0/tAppBannerRCA/queryTAppBanner',{isOn: 1}).then(res => {
					this.listBanner = res.aaData;
				})
			},
			//推荐技师
			listTui(cityId){
				uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/queryTAppStaff',{
					isAuthentication:1,
					hasShop: true,
					isOn:1,
					checkStatus:1,
					isRecommend:1,
					cityId: cityId
				}).then((res) => {
					this.list = res.aaData
				}) 
			},
			hotList(){
				uni.$u.http.post('/api/shop/v1_0/tAppServiceRCA/queryTAppService',{
				}).then((res) => {
					this.hotLists = res.aaData
				})
			},
			bannerClick(index){
				let bannerInfo = this.listBanner[index];
				if(bannerInfo.jumpType == 2){
					// 外部链接 跳转webViwe
					uni.setStorageSync('jumpUrl', bannerInfo.jumpContent);
					console.log(uni.getStorageSync('jumpUrl'))
					uni.navigateTo({
						url: "/pages/index/webview"
					})
				}else{
					// 跳转到商品详情
					uni.navigateTo({
						url: "/pages/order/goodsDetail?id=" + bannerInfo.jumpContent
					})
				}
			},
			toMessage(){
				uni.navigateTo({
					url: "/pages/message/notice"
				})
			},
			toCityPage(){//城市
			  if(this.isDw=="0"){
					let system = uni.getSystemInfoSync(); // 获取系统信息
					if (system.platform === 'android') { // 判断平台
						this.isShowMsg = true; //弹出授权说明
					}
				 this.getLocation(true)
			  }else{
				uni.navigateTo({
					url: "/pages/cityChoose/city"
				  })
			  }
			
			},
			msgClick(){
				this.isShowMsg = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/common/css/public.scss";
	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}
	.bg-purple {
		background: #CED7E1;
	}
	.bg-purple-light {
		background: #e5e9f2;
	}
	.bg-purple-dark {
		background: #99a9bf;
	}
	
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	
	.content-box{
		padding: 0 32rpx;
	}
	
	.top-font{
		font-size: 30rpx;
		font-weight: bold;
	}
	.little-nav-box{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-top: 24rpx;
	}
	.little-nav{
		font-size:20rpx;
		color: #1F894C;
		line-height: 16rpx;
		display: flex;
		align-items: center;
		image{
			margin-right: 5rpx;
		}
	}
	.index-nav-box{
		display: flex;
		align-items: center;
		justify-content: center;
		.box{
			text-align: center;
		}
	}
	.index-nav-box image{
		width:108rpx;
		height: 108rpx;
		text-align: center;
	}
	.index-nav-box .font{
		text-align: center;
		font-size: 24rpx;
		color: #333;
	}
	.people-box{
		text-align: center;
		padding: 0 16rpx 30rpx 0;
		min-width: 146rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		.img-box{
			display: flex;
			justify-content: center;
			margin-bottom: 16rpx;
			
			.img{
				width: 100rpx;
				height: 100rpx;
				background: #f8f8f8;
				overflow: hidden;
			}
		}
		
		.name{
			font-size:24rpx;
			color: #333;
			margin-bottom: 4rpx;
		}
		.num{
			min-width: 130rpx;
			font-size: 24rpx;
			color:#999;
		}
	}
	.tab{
		padding:32rpx 0;
		.tab-title{
			display: flex;
			align-items: center;
			justify-content: start;
			.font{
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
			}
			.img{
				width:10rpx;
				height: 30rpx;
				margin-right:8rpx;
			}
		}
		.tab-more{
			display: flex;
			align-items: center;
			justify-content: end;
			.font{
				color: #999;
				font-size: 24rpx;
			}
			.img{
				width:32rpx;
				height: 32rpx;
				margin-right:8rpx;
			}
		}
	}
	
	.back-img{
		background:#fff url("/static/image/back.png") no-repeat;
		background-size: 100% auto;
	}
	.red-back{
		background: url("/static/image/line.png") no-repeat;
		background-size: 100% auto;
		 //background-image: linear-gradient (red 10%,blue)
	}
	.home-index{
		position: relative;
	}
	.addr-msg{
		width: 90%;
		padding: 30rpx;
		background-color: #fff;
		font-size: 28rpx;
		position: absolute;
		z-index: 9999;
		margin: 0 auto;
		left: 50%;
		top: 20rpx;
		transform: translateX(-50%);
		line-height: 44rpx;
		border-radius: 10rpx;
		.addr-msg-title{
			font-weight: bold;
			font-size: 36rpx;
			margin-bottom: 20rpx;
		}
		.addr-msg-btn{
			width: 35%;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			border-radius: 30rpx;
			font-weight: bold;
			color: #fff;
			background: #27A0FF;
			margin: 0 auto;
			margin-top: 26rpx;
		}
	}
</style>
